<template>
    <div class="page-wrapper" :style="{ padding: isInside ? '0' : 'var(--mPadding) var(--lPadding)' }">
        <BreadMenu v-if="!isInside" />
        <div :style="{ height: isInside ? '100%' : '96%', 'overflow':'hidden auto', 'background':'#fff' }">
            <div style="width:26vw; padding-top:var(--hPadding); margin:0 auto;">
                <!-- 上传LOGO -->
                <div class="logo-container">
                    <div class="label">上传logo</div>
                    <CustomUpload ref="uploadRef" text2="图片" :allowTypes="allowTypes" size="rect" :marquee="false" fileType="img" prop="logoPath" :maxSize="1"  @on-select="handleSelect" />
                </div>
                <!-- 二维码设置 -->
                <div class="code-container">
                    <div class="code-toggle">
                        <div :class="{ 'selected':form.labelType === '1' }" @click=" form.labelType = '1'">条形码</div>
                        <div :class="{ 'selected': form.labelType === '2' }" @click=" form.labelType = '2'">二维码</div>
                    </div>
                    <div class="code-option">
                        <div>
                            <FlexCheckbox :data="{ paramKey:'checked'}" :payload="checkboxOpt" :form="form"  />
                        </div>
                        <div class="code-btn" @click="visible = true">标签模板</div>
                    </div>
                    <div class="code-content">
                        <CodeTpl 
                            :tplIndex="tplIndex" 
                            v-bind="form" 
                            :info="obj"
                            :checkList="checkboxOpt" 
                            @passCode="handlePassCode"

                        />
                    </div>
                </div>
                <!-- 打印设置 -->
                <div class="print-container">
                    <div class="print-title">打印纸设置</div>
                    <div class="print-item">
                        <div class="print-item-label">标签宽度（cm）</div>
                        <div class="print-item-control"><FlexInputNum :data="{ paramKey:'labelWidth' }" :min="6" :max="16" :form="form" /></div>
                        <div class="print-item-text">标签比例 2:3 高度自适应</div>
                    </div>
                </div>
                <div class="action-container">
                    <div v-if="isInside" class="flex-btn opacity large" @click="handleClose">取消</div>
                    <div v-else class="flex-btn opacity large" @click="handleSave">保存</div>
                    <div class="flex-btn large" @click="handleExport" >导出Word</div>
                </div>
            </div>
            <!-- 模板弹窗 -->
            <el-dialog width="68vw" class="flex-dialog" v-model="visible" >
                <template #header>
                    <div style="font-size:var(--18FontSize); margin:0 auto; font-weight:500; color:#525866;">{{ `${ form.labelType === '1' ? '条形码' : '二维码' }标签模板` }}</div>
                </template>
                <BarCodeList v-if="form.labelType === '1'" :tplIndex="tplIndex" @changeTpl="handleChangeTpl" />
                <QRCodeList v-if="form.labelType === '2'" :tplIndex="tplIndex" @changeTpl="handleChangeTpl" />
            </el-dialog>
        </div>
	</div> 
</template>

<script setup>
    import { ref, reactive, watch, onMounted, computed, h, nextTick } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { addOrUpdateObject } from '@/api/object.js'; 
    import { getCycleList } from '@/api/cycle.js';
    import { ElMessage, ElPopconfirm, ElInput  } from 'element-plus' 
    import BreadMenu from '@/components/BreadMenu.vue';
    import { getStorage } from '@/utils/encryption.ts';
    import { downloadWord } from '@/utils/file';
    import CustomUpload from '@/components/CustomUpload.vue';
    import FlexInputNum from '@/components/FlexInputNum.vue';
    import FlexCheckbox from '@/components/FlexCheckbox.vue';
    import BarCodeList from './barCodeTpls/index.vue';
    import QRCodeList from './qrCodeTpls/index.vue';
    import CodeTpl from './CodeTpl.vue';
    const props = defineProps({
        isInside:{ type:Boolean, default:false },
        info:{ type:Object },
        rows:{ type:Array },
    })
    const router = useRouter();
    const route = useRoute();
    const obj = ref({});
    const uploadRef = ref();
    const allowTypes = ['jpg', 'jpeg', 'png'];  
    const checkboxOpt = [{ label:'名称', value:'name'}, { label:'编号', value:'code'}, { label:'logo', value:'logo'}, { label:'位置', value:'pos' }]
    const tplIndex = ref(0);
    const visible = ref(false);
    const form = reactive({
        logoPath:'',
        labelType:'1',
        checkCode:'',
        checked:['name', 'code', 'logo', 'pos'],
        labelWidth:8,  
    })
    const handleChangeTpl = ( index )=>{
        tplIndex.value = index;
        visible.value = false;
    }
    const handleSelect = (name, path)=>{
        form[name] = path;
    }
    const handlePassCode = (code)=>{
        form.checkCode = code;
    }
    watch(()=>form.labelType, ()=>{
        tplIndex.value = 0;
    })
    function handleSave(){
        // printType 当成是模板索引号来保存
        let params = { targetId:obj.value.targetId, printType:tplIndex.value, logoPath:form.logoPath, labelType:form.labelType, checkCode:form.checkCode, showContent:form.checked.join('|'), labelWidth:form.labelWidth  }
        addOrUpdateObject(params, true)
        .then(res=>{
            if ( res.data.code === 200 ) {
                ElMessage({
                    type:'success',
                    message:'设置识别标签成功'
                });
                // 跳转至巡检对象列表
                router.push('/inspectionObject');
            }
        })
    }
    function handleClose(){
        form.logoPath = '';
        form.labelType = '1';
        form.checkCode = '';
        form.checked = ['name', 'code', 'logo', 'pos'];
        form.labelWidth = 8; 
        props.info.visible = false;
    }
    function handleExport(){
        const temp = document.getElementsByClassName('myLabel')[0];
        if ( temp ) {
            const ele = temp.childNodes[0];
            if ( ele ) {
                downloadWord(ele, obj.value.targetName);
            }
        }
    }
    onMounted(()=>{
       
        let temp = getStorage('currentRow');
        if ( temp ) {
            let jsonObj = JSON.parse(temp);
            obj.value = jsonObj;
            const { logoPath, showContent, printType, labelType } = jsonObj;
            if ( printType ) {
                tplIndex.value = Number(printType);
            }
            if ( labelType ) {
                form.labelType = String(labelType);
            }
            if ( showContent ) {
                form.checked = showContent.split('|').filter(i=>i);
            }
            if ( logoPath ) {
                nextTick(()=>{
                    uploadRef.value.init(logoPath);
                })
            }
        
        } else {
            router.push('/inspectionObject');
        }
    })
</script>
<style scoped lang="scss">
    .logo-container {
        display:flex;
        .label {
            color:#0E121B;
            font-weight:bold;
            margin-right:var(--mPadding);
        }
       
    }

    .print-container {
        width:90%;
        .print-title {
            font-size:var(--18FontSize);
            font-weight:bold;
            color:#0E121B;
            padding:var(--mPadding) 0;
            border-top: 1px solid  #e1e4ea;        
        }
        .print-item {
            display:flex;
            align-items: center;
            .print-item-control {
                flex:1;
                margin:0 var(--mPadding);
            }
            .print-item-text {
                font-size:var(--12FontSize);
                color:#99A0AE;
            }
        }
    }
    .code-container {
        margin-bottom:var(--lPadding);
        position:relative;
        .code-toggle {
            background: #f9fafb;
            border: 1px solid #eaecf0;
            border-radius:8px;
            padding:4px;
            display:flex;
            gap:var(--sPadding);
            align-items: center;
            div {
                flex:1;
                border-radius:8px;
                background:#f9fafb;
                padding:var(--sPadding) var(--mPadding);
                text-align: center;
                color:#344054;
                font-weight:bold;
                cursor:pointer;
            }
            div:hover {
                background:#eef0f5;
            }
            div.selected {
                background:#fff;
                box-shadow: 0px 1px 2px #1018280f, 0px 1px 3px #1018281a;
            }
        }
        .code-option {
            display:flex;
            justify-content: space-between;
            align-items: center;
            margin:var(--mPadding) 0;
            .code-btn {
                color:#335CFF;
                font-weight:bold;
                cursor:pointer;
            }
        }
        .code-content {
            margin:0 auto;
        }
    }
    .action-container {
        display:flex;
        margin-top:var(--lPadding);
        div {
            flex:1;
        }
    }
</style>